<template>
<div>
  <div style="display: flex;  align-items: center;  height: 45px; background-color: white;">
        <span>采购单编号</span>
        <el-input
          style="width: 10%"
          v-model="queryParams.batchesOfInventoryNumber"
          placeholder="请输入采购单编号"
          clearable
          @keyup.enter.native="handleQuery"
          
        />
    
    &nbsp;&nbsp;
       <span>审核状态：</span>
       <el-select placeholder="请选择" class=""  v-model="queryParams.batchesOfInventoryStatus">
      <el-option
        v-for="(item,index) in batchesOfInventoryStatusList"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
&nbsp;&nbsp;
       <span>供应商：</span>
       <el-select placeholder="请选择" class=""  v-model="queryParams.supplierId">
      <el-option
        v-for="item in supplierList"
        :key="item.sid"
        :label="item.supplierName"
        :value="item.sid">
      </el-option>
    </el-select>
    &nbsp;&nbsp;
   <span>制单日期：</span>
     
        <el-date-picker
          v-model="daterangeBatchesOfInventoryDate"
          style="width: 240px"
            align="right"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
           unlink-panels
           :picker-options="pickerOptions"
        ></el-date-picker>

         
  


       &nbsp;&nbsp; &nbsp;&nbsp;
  
   
        <el-button type="primary" icon="el-icon-search" size="medium " @click="handleQuery">搜索</el-button>
         &nbsp;&nbsp;
        <el-button icon="el-icon-refresh" size="medium " @click="resetQuery">重置</el-button>
     </div>
 

 

    <el-table :data="batchesOfInventoryList" >
    
      <el-table-column label="批次库存ID" align="center" prop="batchesOfInventoryId" />
      <el-table-column label="供应商" align="center" prop="supplierName" />
      <el-table-column label="采购单编号" align="center" prop="batchesOfInventoryNumber" />
      <el-table-column label="采购员" align="center" prop="purchaseName" />
      <el-table-column label="采购总金额" align="center" prop="batchesOfInventoryTotalMoney" />

      <el-table-column label="制单日期" align="center" >
         <template slot-scope="scope">
    {{ formatDate(scope.row.batchesOfInventoryDate, scope.row) }}
  </template>   
      </el-table-column>
     
      <el-table-column label="审核状态：" align="center" prop="batchesOfInventoryStatus" :formatter="stateFormat"/>
      <el-table-column label="审核人员" align="center" prop="verifierName" />
      <el-table-column label="审核日期" align="center" prop="batchesOfInventoryVerifierDate" >
         <template slot-scope="scope">
    {{ formatDate(scope.row.batchesOfInventoryVerifierDate, scope.row) }}
        </template>   
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-paddiwqAng fixed-width">
        <template slot-scope="scope">
           <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleCheck(scope.row)"
            
          >查看</el-button>
          
          <el-button
            v-if="scope.row.batchesOfInventoryStatus==1"
            size="mini"
            type="text"
            icon="el-icon-document-add"
            @click="handleWarehousing(scope.row)"
           
          >审核入库</el-button>
          <el-button
           v-if="scope.row.batchesOfInventoryStatus==2"
            size="mini"
            type="text"
            icon="el-icon-document-add"
            @click="handleReWarehousing(scope.row)"
           
          >再次入库</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页 -->
   <el-pagination :page-sizes="[5, 10, 15]" :page-size="queryParams.pageSize" :total="total" :current-page="queryParams.pageNum"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>


    
    

    <!-- 查看采购详情 -->
    <el-dialog :title="title" :visible.sync="open" width="900px"  append-to-body>

       <el-table :data="purchaseList" >
      

      <el-table-column label="药品名称：" align="center" prop="medicinesName" />
  
      
      <el-table-column label="采购数量" align="center" prop="purchaseNum" >
      
    </el-table-column>
      <el-table-column label="批发价" align="center" prop="purchaseTradePrice" >
     
    </el-table-column>
      <el-table-column label="处方价" align="center" prop="purchasePrescriptionPrice" >
     
    </el-table-column>
      <el-table-column label="采购批发总额" align="center"  >
         
      <template slot-scope="scope">
        {{ scope.row.purchaseTradePrice * scope.row.purchaseNum }}
      </template>
    </el-table-column>
      <el-table-column label="采购处方总额" align="center"  >
        
      <template slot-scope="scope">
        {{ scope.row.purchasePrescriptionPrice * scope.row.purchaseNum }}
      </template>
    </el-table-column>

    </el-table>
     
      <div slot="footer" >
     
        <el-button @click="open=false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
 import {getbatchesOfInventory,getSuppliers,getBatchDetails,auditAndWarehousing} from '@/api/medicines.js'
 import  dayjs  from 'dayjs';
export default {
  name: "Rksh",
 data() {
    return {
       purchaseList: [],//采购列表
         // 供货商信息
      supplierList: [], 
        //日期选择
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
          //审核状态信息
       batchesOfInventoryStatusList:
        [{
            value: 1,
            label: '未审核'
          }, {
            value: 2,
            label: '已审核'
          }]
        ,
    
    
      // 总条数
      total: 0,
      // 批次库存表格数据
      batchesOfInventoryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 更新时间时间范围
      daterangeBatchesOfInventoryDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierId: null,//供应商Id
        batchesOfInventoryNumber: null,//采购单编号
        // batchesOfInventoryDate: null,//采购日期
        batchesOfInventoryStatus: null,//审核状态
        beginBatchesOfInventoryDate: null,
        endBatchesOfInventoryDate: null
      },
     
      
    };
  },
  created() {
     this.getsupplierList();
    this.getList();
    
  },
  methods: {

      formatDate(row){
      return dayjs(row).format('YYYY-MM-DD HH:mm:ss')
},
      /** 查询供应商信息列表 */
          getsupplierList() {
      getSuppliers().then(response => {
          
        this.supplierList = response;
      
      });
          },
//根据数据返回状态
    stateFormat(row,column){
        
        if (row.batchesOfInventoryStatus === 1) {
          return '未审核'
        } else  {
          return '已审核'
        } 

    },
    /** 查询批次库存列表 */
    getList() {
   
      
      if (null != this.daterangeBatchesOfInventoryDate && '' != this.daterangeBatchesOfInventoryDate) {
        this.queryParams.beginBatchesOfInventoryDate = this.daterangeBatchesOfInventoryDate[0];
        this.queryParams.endBatchesOfInventoryDate = this.daterangeBatchesOfInventoryDate[1];
      }else{
          this.queryParams.beginBatchesOfInventoryDate = null;
        this.queryParams.endBatchesOfInventoryDate = null;
      }
      getbatchesOfInventory(this.queryParams).then(response => {
        this.batchesOfInventoryList = response.data.list;
        this.total = response.data.total;
      
      });
     
    },
         // //分页/
      // 每页显示多少条
      handleSizeChange(val) {
        // 改变每页显示的条数 
        this.queryParams.pageSize=val
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.queryParams.pageNum=1
        this.getList();
      
      },
      // 现在显示当前页的第几页
      handleCurrentChange(val) {
        // 改变默认的页数
        this.queryParams.pageNum=val,
        this.getList();
       
      },



    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeBatchesOfInventoryDate = [];
      
         this.queryParams.pageSize=10,
               this.queryParams.supplierId=null,
               this.queryParams.batchesOfInventoryStatus=null,
                  this.queryParams.batchesOfInventoryNumber=null,
                 

      this.handleQuery();
    },
     /** 查看按钮操作 */
    handleCheck(row) {
 
     getBatchDetails(row.batchesOfInventoryId).then(response => {
     
          
        this.purchaseList=response.data;
      
      });
      this.open=true;
      this.title="批次详情"
  
    },
       /** 审核入库按钮操作 */
    handleWarehousing(row) {
       auditAndWarehousing(row.batchesOfInventoryId,1).then(response => {
          this.$message({
          message: '审核入库成功',
          type: 'true'
        });
     this.getList();
          
     
      
      });
   
    },
     /** 再次入库按钮操作 */
    handleReWarehousing(row) {
      auditAndWarehousing(row.batchesOfInventoryId,2).then(response => {
         this.getList();
     
            this.$message({
          message: '再次入库成功',
          type: 'true'
        });
     
      
      });
     
    },
    
    },
 
  
   
   
  
  

};
</script>


<style>
/* 路由的简单过渡动画效果 */
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: 0.3s;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: 0.3s;
}
</style>
